<template>
  <div v-if="result" class="live">
    <list-title>{{ result.all.name }}</list-title>
    <div class="box">
      <loading v-if="result.sub.length == 0"></loading>
      <ul v-else>
        <li v-for="index in result.sub.length" :key="index">
          <router-link :to="`/catlist/${result.sub[index - 1].name}`">
            <div class="small_box">
              <span>{{ result.sub[index - 1].name }}</span>
            </div>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import ListTitle from "@/components/ListTitle.vue";
import Loading from "@/components/Loading.vue";
export default {
  name: "CatList",
  data() {
    return {
      result: null,
    };
  },
  components: {
    ListTitle,
    Loading,
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.axios
        .get(`/playlist/catlist`)
        .then((result) => {
          vm.result = result;
          let all = result.categories.map((v, index) => {
            v.categories = {
              categories: result.categories[index],
              sub: result.sub[index],
              name: v.name,
            };
            return v;
          });
          vm.catlist = all;
        })
        .catch(() => null);
    });
  },
};
</script>
<style lang="less" scoped>
.box {
  padding-bottom: 50px;
  ul {
    display: flex;
    justify-content: space-evenly;
    flex-direction: row;
    flex-wrap: wrap;
    li {
      padding: 5px;
      width: 110px;
      &:last-child{
        width: auto;
      }
      a{
        text-align: center;
      }
      .small_box {
        padding: 2px 5px;
        background-color: white;
        border-radius: 10px;
        position: relative;
        span {
          width: 40px;
          text-align: center;
          color: var(--cy-Color);
          border-radius: 10px;
          padding: 4px 12px;
        }
      }
    }
  }
}
</style>